<template>
  <v-container>
    <v-window v-model="tab.$state.TabIndex">
      <v-window-item
        v-for="n in 3"
        :key="n"
        :value="n"
      >
        <v-container fluid>
          <v-row>
            <v-col v-for="image in TabImage" :key="image.animal_id" cols="3">
              <v-card class="rounded-xl" @click="openDialog(image)">
                <v-img
                  :src="image.animalImageUrls[0]"
                  aspect-ratio="1.3"
                  cover
                  lazy-src="@/assets/placeholder.jpg"
                >
                  <!--卡片的加载占位符-->
                  <template v-slot:placeholder>
                    <div class="d-flex align-center justify-center fill-height">
                      <v-progress-circular color="grey-lighten-4" indeterminate></v-progress-circular>
                    </div>
                  </template>
                </v-img>
                <v-card-title class="text-h6 text-center">{{ image.name }}</v-card-title>
              </v-card>
            </v-col>
          </v-row>
        </v-container>
      </v-window-item>
    </v-window>
  </v-container>

  <!-- Dialog 弹出窗口 -->
  <v-dialog v-model="dialogVisible" width="800">
    <v-card v-if="selectedImage" class="rounded-xl">
      <v-card-title class="text-h6 text-center">{{ selectedImage.name }}</v-card-title>
      <v-card-text>
        <v-list dense style="overflow-y: hidden ;overflow-x: hidden">
          <v-list>
            <v-carousel cycle height="500" hide-delimiter-background show-arrows="hover">
              <v-carousel-item v-for="(image, index) in selectedImage.animalImageUrls" :key="index">
                <v-img :src="image" aspect-ratio="1/1" class="rounded-image" cover lazy-src="@/assets/placeholder.jpg">
                </v-img>
              </v-carousel-item>
            </v-carousel>
          </v-list>

          <v-row justify="center">
            <v-col cols="12" md="6" sm="12">
              <v-card class="mx-auto" height="100%" max-width="300">
                <v-list>
                  <v-list-item>
                    <v-list-item-title>种类: {{ selectedImage.species }}</v-list-item-title>
                  </v-list-item>
                  <v-list-item>
                    <v-list-item-title>品种: {{ selectedImage.breed }}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-card>
            </v-col>

            <v-col cols="12" md="6" sm="12">
              <v-card class="mx-auto" height="100%" max-width="300">
                <v-list>
                  <v-list-item>
                    <v-list-item-title>年龄: {{ selectedImage.age }} 岁</v-list-item-title>
                  </v-list-item>
                  <v-list-item>
                    <v-list-item-title>性别: {{ selectedImage.gender }}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-card>
            </v-col>

            <v-col cols="12" md="6" sm="12">
              <v-card class="mx-auto" height="100%" max-width="300">
                <v-list>
                  <v-list-item>
                    <v-list-item-title>描述:</v-list-item-title>
                  </v-list-item>
                  <v-list-item>
                    {{ selectedImage.description }}
                  </v-list-item>
                </v-list>
              </v-card>
            </v-col>

            <v-col cols="12" md="6" sm="12">
              <v-card class="mx-auto" height="100%" max-width="300">
                <v-list>
                  <v-list-item>
                    <v-list-item-title>状态: {{ selectedImage.status }}</v-list-item-title>
                  </v-list-item>
                </v-list>
              </v-card>
            </v-col>
          </v-row>
        </v-list>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-row align="center" no-gutters>
          <v-col class="d-flex align-center" cols="auto">
            <v-btn color="primary" @click="closeDialog">关闭</v-btn>
          </v-col>
          <v-spacer></v-spacer>
          <v-col cols="auto">
            <v-container class="pa-0">
              <v-btn color="primary" @click="favoriteMessage">收藏</v-btn>
            </v-container>
          </v-col>

        </v-row>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script lang="ts" setup>
import {computed, onMounted, Ref, ref} from 'vue';
import {bookStore, userStore} from '@/store/app';
import axios from 'axios';

const tab = bookStore();
const collect = userStore();
const images = ref<Animal[]>([]); // 明确指定 images 为 Animal 类型数组 // 存储从 API 获取的图片数据
const dialogVisible = ref(false);
const selectedImage: Ref<Animal | null> = ref(null); // 存储用户选择的图像,使用 Ref 包装器

interface Animal {
  animal_id: number;
  name: string;
  species: string;
  breed: string;
  age: number;
  gender: string;
  description: string;
  status: string;
  animalImageUrls: string[];
}

// 根据 tab 切换筛选图片
const TabImage = computed(() => {
  if (tab.$state.TabIndex == 3) return images.value.filter(i => i.species === '天鹅');
  else if (tab.$state.TabIndex == 2) return images.value.filter(i => i.species === '猫');
  else return images.value;
});

const openDialog = (image: Animal) => {
  selectedImage.value = image;
  dialogVisible.value = true;
};

const closeDialog = () => {
  dialogVisible.value = false;
};

onMounted(async () => {
  try {
    const response = await axios.get('http://47.113.189.87:8080/animals/getAnimals');
    console.log('response:', response.data.data);
    images.value = response.data.data; // 假设返回的数据是在 data.data 中
  } catch (error) {
    console.error('Error fetching data:', error);
  }
});
computed(() => {
  if (selectedImage.value) {
    return selectedImage.value.animalImageUrls.map((url, index) => {
      return {
        src: url,
        id: index
      };
    });
  } else {
    return [];
  }
});
const favoriteMessage = () => {
  axios.post("http://47.113.189.87:8080/users/saveFavorite", {
    user_name: collect.$state.UserName,
    animal_name: selectedImage.value?.name
  }).then((response) => {
    if (response.data.code == 20011) {
      console.log('收藏成功', response.data)
      alert('收藏成功！')
    } else {
      console.error(response.data.msg)
      alert('失败')
    }
  })
};
</script>
<style scoped>
body {
  font-family: 'DetailFont', sans-serif; /* 使用 'DetailFont' 字体 */
}

.custom-theme {
  :root {
    --primary: #1976D2; /* 设置您自己的主题颜色 */
  }
}

.rounded-xl {
  border-radius: 32px; /* 添加圆角样式 */
}

.rounded-image {
  border-radius: 20px; /* 添加圆角效果 */
}
</style>
